<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">
<h:head>
</h:head>
<h:body>
	<ui:composition template="/template/template.xhtml">

		<ui:define name="pageTitle">Employes >> Liste Employes</ui:define>
		<ui:define name="content">
			<h:form id="formsearchEmploye">

				<!-- Begin Div Recherche -->

				<div class="searchResult">
					<table width="100%" height="100%">
						<tr>
							<td width="20%"><h:outputLabel value="Nom" /></td>
							<td><rich:autocomplete id="name" mode="ajax"
									value="#{employeController.employeBean.nom}"
									autocompleteMethod="#{employeController.autocomplete}"
									autofill="true">
								</rich:autocomplete></td>
							<td width="20%"><h:outputLabel value="Prénom" /></td>
							<td width="20%"><h:inputText
									value="#{employeController.employeBean.prenom}" /></td>
							<td />
						</tr>
						<tr>
							<td align="left" width="100px;"><h:outputLabel
								value="From" /></td>
							<td align="left" width="150px;"><rich:calendar id="dateStart"
								datePattern="dd/MM/yyyy"
								value="#{employeController.employeBean.dateStart}"
								isDayEnabled="disablementFunction"
								dayStyleClass="disabledClassesProv" boundaryDatesMode="scroll"
								size="25" > 
								</rich:calendar> </td>
							<td align="left" width="80px;"><h:outputLabel value="To" />
							</td>
							<td align="left"><rich:calendar id="dateEnd"
								datePattern="dd/MM/yyyy" popup="true"
								value="#{employeController.employeBean.dateEnd}"
								isDayEnabled="disablementFunction"
								dayStyleClass="disabledClassesProv" boundaryDatesMode="scroll"
								size="25" >
								</rich:calendar></td>
						</tr>
						<tr>
							<td width="20%"><h:outputLabel value="Salaire" /></td>
							<td width="20%"><h:inputText
									value="#{employeController.employeBean.salaire}" /></td>

							<td width="20%"><h:outputLabel value="Département" /></td>
							<td width="20%"><h:selectOneMenu value="#{employeBean.dep}">
									<!-- {employeBean.dep}: contiendra le ID du dép selectionné -->
									<f:selectItem></f:selectItem>
									<f:selectItems value="#{employeController.listDep}" />
								</h:selectOneMenu></td>
							<td />
						</tr>
						<tr>
							<td />
							<td />
							<td />
							<td></td>
							<td align="right"><a4j:commandButton value="Afficher"
									action="#{employeController.getEmployesByCriteria}"
									render="tableEmploye" /></td>
						</tr>
					</table>
				</div>
			</h:form>
			<!-- End Div Recherche -->

			<div class="blank" />


			<!-- Begin Div Result -->
			<h:form id="formListEmploye">
				<div class="results">

					<!--     			<a4j:status onstart="#{rich:component('statPane')}.show()" onstop="#{rich:component('statPane')}.hide()" />  -->

					<rich:dataTable value="#{employeController.listEmployes}"
						var="employe" id="tableEmploye" rows="15" style="margin: auto;"
						rowClasses="odd-row, even-row" iterationStatusVar="it">
						<rich:column>
							<f:facet name="header">#</f:facet>
							<h:outputText value="#{it.index}" />
						</rich:column>
						<rich:column>
							<f:facet name="header">Nom</f:facet>
							<h:outputText value="#{employe.nom}" />
						</rich:column>
						<rich:column>
							<f:facet name="header">Prénom</f:facet>
							<h:outputText value="#{employe.prenom}" />
						</rich:column>
						<rich:column>
							<f:facet name="header">Email</f:facet>
							<h:outputText value="#{employe.email}" />
						</rich:column>
						<rich:column>
							<f:facet name="header">Téléphone</f:facet>
							<h:outputText value="#{employe.tel}" />
						</rich:column>
						<rich:column>
							<f:facet name="header">Date de Naissance</f:facet>
							<h:outputText value="#{employe.dateNaiss}" />
						</rich:column>
						<rich:column>
							<f:facet name="header">Salaire</f:facet>
							<h:outputText value="#{employe.salaire}" />
						</rich:column>
						<rich:column>
							<f:facet name="header">Job</f:facet>
							<h:outputText value="#{employe.job.titreJob}" />
						</rich:column>
						<rich:column>
							<f:facet name="header">Département</f:facet>
							<h:outputText value="#{employe.departement.nomDep}" />
						</rich:column>
						<rich:column>
							<f:facet name="header">Location</f:facet>
							<h:outputText value="#{employe.departement.location.provaince}" />
						</rich:column>

						<rich:column style="width:10px;">
							<!-- render="addupdatetable" : c est le ID du formulaire de update-->
							<a4j:commandLink styleClass="no-decor" execute="@this"
								action="#{employeController.updateInstance}"
								render="addupdatetable">

								<img src="../../resources/images/edit.gif" style="align: center"
									alt="edit" title="IconModifier" />

								<f:setPropertyActionListener
									target="#{employeController.employe}" value="#{employe}" />

							</a4j:commandLink>
						</rich:column>

						<rich:column style="width:10px;">
							<a4j:commandLink styleClass="no-decor" execute="@this"
								oncomplete="#{rich:component('confirmPane')}.show()">

								<img src="../../resources/images/delete.gif"
									style="align: center" alt="edit" title="IconSupprimer" />

								<f:setPropertyActionListener
									target="#{employeController.employe}" value="#{employe}" />

							</a4j:commandLink>
						</rich:column>

						<f:facet name="footer">
							<rich:dataScroller page="#{employeController.page}"
								render="tableEmploye" />
							<!-- ##    Pagination   ## -->
						</f:facet>

					</rich:dataTable>


					<!-- Instructions suivantes sont (complémentaires) reliées avec le lien de " Suppression " -->

					<a4j:jsFunction name="remove" action="#{employeController.remove}"
						render="tableEmploye" execute="@this"
						oncomplete="#{rich:component('confirmPane')}.hide();" />

					<rich:popupPanel id="confirmPane" autosized="true">
			            Are you sure you want to delete the row?
			            <a4j:commandButton value="Cancel"
							onclick="#{rich:component('confirmPane')}.hide(); return false;" />
						<a4j:commandButton value="Delete"
							onclick="remove(); return false;" />
					</rich:popupPanel>

					<rich:popupPanel id="statPane" autosized="true">
						<h:graphicImage value="../../resources/images/ai.gif" alt="ai" />
			            Please wait...
			        </rich:popupPanel>

				</div>
				<!-- End Div Result -->
				<!-- Begin Div Footer -->
				<div class="footerResults">
					<table width="90%">
						<tr>
							<td width="70%" />
							<td align="right"><h:commandButton value="Ajouter"
									action="#{employeController.createInstance}" /></td>
						</tr>
					</table>
				</div>
				<!-- End Div Footer -->
			</h:form>
		</ui:define>
	</ui:composition>
</h:body>

</html>